<template>
<!--轮播图-->
 <div class="title"> [ WARFRAME 新闻 ]</div>
  <el-carousel :interval="4000" type="card" height="300px" >
    <el-carousel-item v-for="item in news" :key="item.id" :name="item.message">
      <a :href="item.link" target="_blank">
        <img :src="item.imageLink" :alt="item.message">
        <h3 class="medium">{{ item.message }}</h3></a>
    </el-carousel-item>
  </el-carousel>
<!-- 轮播图结束 -->
<!--  综合事件-->
  <div class="title">[ 综合事件 ]</div>
  <el-row :gutter="20">
    <el-col :lg="6" :md="12" :sm="12"><div class="grid-content bg-purple">
      <el-card class="box-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>仲裁</span>
            <a class="button click " type="text" @click="getWarframe">
              刷新
            </a>
          </div>
        </template>
        <div v-if="arbitration.type">
          <h3> {{arbitration.type}} </h3>
          <p><small>阵营</small> {{arbitration.enemy}} </p>
          <p><small>地点</small> {{arbitration.node}} </p>
          <p><small>剩余时间 </small> <time :data-info="timeToTime(arbitration.expiry)"></time></p>
        </div>
        <div v-else>
          当前暂无仲裁信息
        </div>
      </el-card>
    </div></el-col>
    <el-col :lg="6" :md="12" :sm="12"><div class="grid-content bg-purple">
      <el-card class="box-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>警报</span>
            <a class="button click " type="text" @click="getWarframe">
              刷新
            </a>
          </div>
        </template>
        <div v-if="alerts">
          <el-carousel height="190px" arrow="never">
            <el-carousel-item v-for="item in alerts" :key="item.id" :label="item.mission.type">
              <p><small>类型</small> {{item.mission.type}}</p>
              <p><small>地点</small> {{item.mission.node}}</p>
              <p><small>阵营</small> {{item.mission.faction}}</p>
              <p><small>奖品</small> {{ item.mission.reward.itemString }}</p>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div v-else>
          <p>暂无警报消息</p>
        </div>
      </el-card>
    </div></el-col>
    <el-col :lg="6" :md="12" :sm="12"><div class="grid-content bg-purple">
      <el-card class="box-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>虚空商人</span>
            <a class="button click " type="text" @click="getWarframe">
              刷新
            </a>
          </div>
        </template>
        <div v-if="voidTrader.active">
          <h3> 已到达 </h3>

          <p><small>地点</small> {{voidTrader.location}} </p>
          <p><small>剩余时间  <time :data-info="timeToTime(voidTrader.expiry)"></time></small></p>
        </div>
        <div v-else>
          <h3>未到达</h3>
          <p>剩余 <small><time :data-info="timeToTime(voidTrader.activation)"></time></small>到达</p>
          <p><small>地点</small> {{voidTrader.location}}</p>
        </div>
      </el-card>
    </div></el-col>
    <el-col :lg="6" :md="12" :sm="12"><div class="grid-content bg-purple">
      <el-card class="box-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>Sentient 爆发</span>
            <a class="button click " type="text" @click="getWarframe">
              刷新
            </a>
          </div>
        </template>
        <div v-if="sentientOutposts.active">
          <h3>已经出现</h3>
          <p><small>类型</small> {{sentientOutposts.mission.type}}</p>
          <p><small>阵营</small> {{sentientOutposts.mission.faction}} </p>
          <p><small>地点</small> {{sentientOutposts.mission.node}} </p>
<!--          <p><small>剩余时间  <time :data-info="timeToTime(sentientOutposts.expiry)"></time></small></p>-->
        </div>
        <div v-else>
          <h3>未出现</h3>

        </div>
      </el-card>
    </div></el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :lg="16" :md="16" :sm="16"><div class="grid-content bg-purple">

        <el-row :gutter="12">
          <el-col :span="8" style="margin-bottom: 20px">
            <el-card shadow="hover">
              <template #header>
                <div class="card-header">
                  <span>夜灵平野昼夜变化</span>
                </div>
              </template>
            <div>
              <p><small>当前状态</small> {{transferStatus(cetusCycle.state)}} </p>
              <p><small>剩余时间</small> <time :data-info="timeToTime(cetusCycle.expiry)"></time></p>
            </div>
            </el-card>
          </el-col>
          <el-col :span="8" style="margin-bottom: 20px">
            <el-card shadow="hover">
              <template #header>
                <div class="card-header">
                  <span>奥布山谷冷暖变化</span>
                </div>
              </template>
              <div>
                <p><small>当前状态</small> {{ transferStatus(vallisCycle.state)}} </p>
                <p><small>剩余时间</small> <time :data-info="timeToTime(cetusCycle.expiry)"></time></p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8" style="margin-bottom: 20px">
            <el-card shadow="hover">
              <template #header>
                <div class="card-header">
                  <span>魔胎之境昼夜变化</span>
                </div>
              </template>
              <div>
                <p><small>当前状态</small> {{cambionCycle.active}} </p>
                <p><small>剩余时间</small> <time :data-info="timeToTime(cambionCycle.expiry)"></time></p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8" style="margin-bottom: 20px">
            <el-card shadow="hover">
              <template #header>
                <div class="card-header">
                  <span>地球平原</span>
                </div>
              </template>earthCycle
              <div>
                <p><small>当前状态</small> {{transferStatus(earthCycle.state)}} </p>
                <p><small>剩余时间</small> <time :data-info="timeToTime(earthCycle.expiry)"></time></p>
              </div>
            </el-card>
          </el-col>
        </el-row>

    </div></el-col>
    <el-col :lg="8" :md="8" :sm="8"><div class="grid-content bg-purple">
      <el-card class="box-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>突击</span>
            <a class="button click " type="text" @click="getWarframe">
              刷新
            </a>
          </div>
        </template>
        <div v-if="sortie.active">
          <h3> {{sortie.faction}} </h3>
          <p><small>BOSS</small> {{sortie.boss}} </p>
          <p><small>剩余时间  <time :data-info="timeToTime(sortie.expiry)"></time></small></p>
          <el-carousel height="120px" arrow="never">
            <el-carousel-item v-for="(item,index) in sortie.variants" :key="index" :label="item.missionType">
              <p><small>模式</small> {{item.modifier}} </p>
              <p><small>地点</small> {{item.node}}</p>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div v-else>
          <p>暂无突击信息</p>
        </div>
      </el-card>
    </div></el-col>
  </el-row>
<!--  综合事件结束 -->
</template>

<script>
import {reactive, toRefs} from "@vue/reactivity";
import {onMounted,onUnmounted} from "@vue/runtime-core";
import { ElLoading } from 'element-plus'
import {Utils} from "../../utils/utils";
import axios from "axios";
export default {
  name: "Index",
  setup(){
    const utiles = new Utils();
    const state = reactive({
      timer : null,
      fullTimer:null,
      news : [],
      arbitration : {},
      events:[],
      voidTrader:{},
      invasions:{},
      sortie:{},
      alerts:[],
      earthCycle:{},
      cetusCycle:{},
      vallisCycle:{},
      cambionCycle:{},
      sentientOutposts:{}
    })

    const methods = {
      timeToTime(time){
        let utc = utiles.transferUTCToLocal(time)
        return utc;
      },
      remainingTime(){
        let timearr = document.getElementsByTagName('time')
        for (let i=0;i<timearr.length;i++){
          let exp = timearr[i].dataset.info;
          if( exp !== ""){
            let rl = utiles.countDown(exp)
            timearr[i].innerHTML = rl
          }
        }
      },
      async getWarframe(){
        const loading = ElLoading.service({
          lock: false,
          text: 'Loading',
          background: 'rgba(0, 0, 0, 0)',
        })
        let resp = await axios.get("/wf/detail")
        state.voidTrader = resp.data.voidTrader;
        state.arbitration = resp.data.arbitration;
        state.invasions = resp.data.invasions
        state.news = resp.data.news;
        state.sortie = resp.data.sortie
        state.alerts = resp.data.alerts
        state.cetusCycle = resp.data.cetusCycle
        state.vallisCycle = resp.data.vallisCycle
        state.cambionCycle = resp.data.cambionCycle
        state.earthCycle = resp.data.earthCycle
        state.sentientOutposts = resp.data.sentientOutposts
        loading.close()
      },
      transferStatus(text){
        switch (text) {
            case "day":
              return "白天";
              break;
            case "night":
              return "夜晚";
              break;
            case "cold":
              return "寒冷";
              break;
            case "warm":
              return "温暖";
              break;
        }
      },
    }
    onMounted(()=>{
      // methods.getWFA()
      methods.getWarframe()
      state.timer = setInterval(function () {
        methods.remainingTime();
      },1000)
      state.fullTimer = setInterval(function () {
        methods.getWarframe()
      },15000)

    })
    onUnmounted(()=>{
      clearInterval(state.timer)
      clearInterval(state.fullTimer)
    })
    return {
      ...toRefs(state),
      ...methods
    }
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #99a9bf;
  font-size: 18px;
  opacity: 0.75;
  line-height: 321px;
  margin: 0;
  text-align: center;
  position: fixed;
  top: 20px;
  width: 100%;
  z-index: 999;
}
.el-carousel__item img{
  width: 100%;
  z-index: 1;
  height: 100%;
}
.el-carousel__item:nth-child(2n) {
  /*background-color: #99a9bf;*/
}

.el-carousel__item:nth-child(2n + 1) {
  /*background-color: #d3dce6;*/
}
.el-row {
  margin-bottom: 20px;
}
.el-row .last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  /*background: #99a9bf;*/
}
.bg-purple {
  /*background: #d3dce6;*/
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 26px;
  margin-bottom: 20px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
small{
  border:1px solid #d3dce6;
  padding: 2px 4px;
  margin-right: 5px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.click{
  cursor: pointer;
}
.title{
  display: block;
  text-align: center;
  font-size: 22px;
  margin: 20px 0;
}
</style>